<template>
  <!-- 安全区 -->
  <view class="Safeone"></view>
  <!-- 弧形头像 -->
  <view class="head" v-for="(item, index) in headlist" :key="index">
    <view class="contentbox">
      <img :src="item.image" alt="" class="brr50 img" />
      <view class="headtitle">{{ item.name }}</view>
    </view>
    <!-- 会员 -->
    <view class="huiyuan">
      <img
        src="http://uniqn.zmycode.top/%E4%BC%9A%E5%91%98.png"
        alt=""
        class="img"
      />
      <view class="huiyuantitle"> RF商城尊享会员 </view>
      <view class="huiyuandengji"> 普通会员 </view>
    </view>
  </view>
  <!-- 个人账户 -->
  <view class="account">
    <view class="accounthead" @click="skip('/pages/mine-account/mine-account')">
      <view class="announcement">
        <view class="left">
          <img
            src="http://uniqn.zmycode.top/%E8%B4%A6%E6%88%B7.png"
            alt=""
            class="img"
            mode="widthFix"
          />
        </view>
        <view class="middle"> 个人账户 </view>
        <view class="right">
          <img
            src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
            alt=""
            class="img"
          />
        </view>
      </view>
    </view>
    <view class="account-list">
      <view
        class="account-for-content"
        v-for="(item, index) in accountlist"
        :key="index"
      >
        <view class="accountnum">{{ item.number }}</view>
        <view class="accounttit">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <!-- 全部订单 -->
  <view class="Orderforgoods">
    <view class="Orderforgoodshead">
      <view class="announcement">
        <view class="left">
          <img
            src="http://uniqn.zmycode.top/%E8%AE%A2%E5%8D%95.png"
            alt=""
            class="img"
            mode="widthFix"
          />
        </view>
        <view class="middle"> 全部订单 </view>
        <view class="right">
          <img
            src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
            alt=""
            class="img"
          />
        </view>
      </view>
    </view>
    <view class="Orderforgoods-list">
      <view
        class="Orderforgoods-for-content"
        v-for="(item, index) in Orderforgoodslist"
        :key="index"
      >
        <img :src="item.image" alt="" class="img" />
        <view class="Orderforgoodstit">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <!-- 我的足迹 -->
  <view class="footmark">
    <view class="footmarkhead">
      <view class="announcement">
        <view class="left">
          <img
            src="http://uniqn.zmycode.top/%E8%B6%B3%E8%BF%B9.png"
            alt=""
            class="img"
            mode="widthFix"
          />
        </view>
        <view class="middle"> 我的足迹 </view>
        <view class="right">
          <img
            src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
            alt=""
            class="img"
          />
        </view>
      </view>
    </view>
    <view class="footmark-list">
      <view
        class="footmark-for-content"
        v-for="(item, index) in footmarklist"
        :key="index"
      >
        <img :src="item.image" alt="" class="img" />
        <view class="footmarktit overflow1">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <!-- 我的服务 -->
  <view class="service">
    <view class="servicehead">
      <view class="announcement">
        <view class="left">
          <img
            src="http://uniqn.zmycode.top/%E8%AF%84%E4%BB%B7.png"
            alt=""
            class="img"
            mode="widthFix"
          />
        </view>
        <view class="middle"> 我的服务 </view>
        <view class="right">
          <img
            src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
            alt=""
            class="img"
          />
        </view>
      </view>
    </view>
    <view class="service-list">
      <view
        class="service-for-content"
        v-for="(item, index) in servicelist"
        :key="index"
        @click="skip(item.url)"
      >
        <img :src="item.image" alt="" class="img" />
        <view class="servicetit overflow1">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <view class="bottom"></view>
</template>

<script setup>
import { ref } from "vue";
import {
  headlist,
  accountlist,
  Orderforgoodslist,
  footmarklist,
  servicelist
} from "./mine.js";
const skip = (res) => {
  if (res) {
    uni.navigateTo({ url: res });
  }
};
</script>

<style lang="scss" scoped>
Page {
  background-color: #f5f5f5;
}
.Safeone {
  background-color: #f9436a;
  padding-top: var(--status-bar-height);
}

.head {
  border-radius: 0 0 375rpx 375rpx/0 0 60rpx 60rpx;
  overflow: hidden;
  position: relative;
  height: 400rpx;
  // padding-bottom: 40rpx;
  background-color: #f9436a;
  .contentbox {
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: left;
    align-items: center;
    .img {
      width: 100rpx;
      height: 100rpx;
      border: 3rpx solid #fff;
      margin-right: 20rpx;
    }
    .headtitle {
      color: #fff;
    }
  }
  .huiyuan {
    position: absolute;
    bottom: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    // border: 1px solid red;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    width: 90vw;
    display: flex;
    justify-content: left;
    height: 130rpx;
    border-radius: 20rpx 20rpx 0 0;
    padding: 0 20rpx;
    .img {
      width: 40rpx;
      height: 40rpx;
      border: none;
      position: absolute;
      top: 30rpx;
      left: 20rpx;
    }
    .huiyuantitle {
      color: #f7e4a2;
      position: absolute;
      top: 30rpx;
      left: 80rpx;
    }
    .huiyuandengji {
      background-color: #f7e4a2;
      padding: 10rpx;
      // border: 1px solid red;
      position: absolute;
      right: 20px;
      top: 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }
}
//左右图中间字
.announcement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  .left {
    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .middle {
    width: calc(100vw - 120rpx);
    color: #545454;
    font-size: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }
  .right {
    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
//我的账户
.account {
  background-color: #fff;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 20rpx;
  .accounthead {
    border-bottom: 1px solid #f5f5f5;
  }
  .account-list {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-around;
    .account-for-content {
      text-align: center;
      font-size: 26rpx;
      color: #545454;
      line-height: 40rpx;
    }
  }
}
// 我的订单
.Orderforgoods {
  background-color: #fff;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 20rpx;
  .Orderforgoodshead {
    border-bottom: 1px solid #f5f5f5;
  }
  .Orderforgoods-list {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-around;
    .Orderforgoods-for-content {
      text-align: center;
      font-size: 26rpx;
      color: #545454;
      line-height: 40rpx;
      .img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
//足迹
.footmark {
  background-color: #fff;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 20rpx;
  .footmarkhead {
    border-bottom: 1px solid #f5f5f5;
  }
  .footmark-list {
    padding: 20rpx 0;
    display: flex;
    justify-content: left;
    padding: 10rpx;

    .footmark-for-content {
      text-align: center;
      font-size: 26rpx;
      color: #545454;
      line-height: 40rpx;
      width: 150rpx;

      .img {
        width: 130rpx;
        height: 130rpx;
        margin: 10rpx;
        border-radius: 4rpx;
      }
    }
  }
}
//我的服务
.service {
  background-color: #fff;
  margin: 20rpx 20rpx 0rpx 20rpx;
  border-radius: 20rpx;
  .servicehead {
    border-bottom: 1px solid #f5f5f5;
  }
  .service-list {
    padding: 20rpx 0;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    padding: 10rpx;

    .service-for-content {
      width: calc(100% / 3);
      text-align: center;
      font-size: 26rpx;
      color: #545454;
      line-height: 40rpx;

      .img {
        width: 50rpx;
        height: 50rpx;
        margin: 10rpx;
        border-radius: 4rpx;
      }
    }
  }
}
.bottom {
  height: 20rpx;
}
</style>
